<template>
	<view class="page">
		<movable-area class="moveRange">

			<fixedheader :hideHeight="false" :isBack="false" :headerStyle="{backgroundColor: '#fff'}">
				<block slot="haed">
					<view class="announcement" @click="tourl('/pages/appointment/news')">
						<image src="@/static/appointment/gg.png" mode="widthFix"></image>
						<text>{{noticeTitle | truncate(14)}}</text>
						<image src="@/static/appointment/moreright.png"></image>
					</view>
				</block>
			</fixedheader>
			<!-- 搜索 -->
			<view class="search">
				<view class="inp">
					<image src="@/static/appointment/ss.png" mode="widthFix" style="width: 40rpx;height: 40rpx;">
					</image>
					<input type="text" v-model="name" @confirm="inputSearch" placeholder="搜索" />
				</view>
				<view style="display: flex;align-items: center;"
					@click="tourl('/pages/appointment/newsinfo?type=1&title=下单须知')">
					<image src="@/static/appointment/xz.png" mode="widthFix"
						style="width: 40rpx;height: 40rpx;margin: 0 10rpx;"></image>
					<text style="font-weight: bold;font-size: 28rpx;color: #277EEF;">下单须知</text>
				</view>
			</view>
			<!-- 选择 -->
			<view class="tab">
				<view v-for="(item, i) in choseList" :key="i" @click="topChange(item.id)"
					:class="topSign==item.id ? 'active' : ''">
					{{item.name}}
				</view>
			</view>

			<view style=" ">
				<woodsDropdown :dropdownType="topSign" @handleSearch="handleSearch" />
			</view>

			<view style="background-color: #F8F8F8;" class="conent">
				<homeList ref="homeList" v-if="topSign==1" />
				<storeList ref="storeList" v-if="topSign==2" />
				<goodsList ref="goodsList" v-if="topSign==3" />
			</view>

			<movable-view class="moveBox" :x="x" :y="y" direction="all" @change="onChange"
				@click="tourl('/pages/order/order')">
				<image src="../../static/appointment/suiji.png" mode=""></image>
			</movable-view>
		</movable-area>


	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex";
	import {
		staffUserListAPI,
		materialUserListAPI,
		categoryGoodsListAPI,
		noticelistAPI
	} from "@/api/appointment.js"
	import homeList from "@/components/home-list.vue"
	import storeList from "@/components/store-list.vue"
	import goodsList from "@/components/goods-list.vue"
	import woodsDropdown from '@/components/woods-dropdown.vue'
	import pageing from "@/mixins/pageing.js"

	export default {
		mixins: [pageing],
		components: {
			woodsDropdown,
			homeList,
			storeList,
			goodsList
		},
		data() {
			return {
				choseList: [{
					name: "人员列表",
					id: 1
				}, {
					name: "商户列表",
					id: 2
				}, {
					name: "产品列表",
					id: 3
				}],
				topSign: 1,

				dropdownType: 1,
				categoryId: undefined,
				search_type: undefined,
				allDataList: [],
				goodsTypeId: undefined,
				noticeTitle: '',
				typeid: "",
				typesid: "",

				name: "",
				x: "580rpx",
				y: "1100rpx",
			}
		},
		created() {
			this.getonenotice()
			// this.allDataList=[]
			// this.getlist()

		},

		onTabItemTap(e) {

			if (e.index === 1) {
				this.allDataList = []
				this.getlist()
			}
		},
		computed: {
			...mapState("select", ["location", "city"])
		},
		onShow() {

		},
		methods: {
			onChange: function(e) {
				this.x = e.detail.x;
				this.y = e.detail.y;
				// console.log("x的位置:" + this.x, "y的位置:" + this.y);
			},
			inputSearch() {
				this.pageNo = 1
				this.allDataList = []
				this.getlist()
			},
			getonenotice() {

				noticelistAPI({
					"pageNo": 1,
					"pageSize": 1,
					"sourceType": 0,
					"type": 2
				}).then(res => {
					if (res.data.length > 0) {
						this.noticeTitle = res.data[0].describes.substring(0, 15);
					}

				})
			},
			handleSearch(chosenum, searchValue) {
				this.allDataList = []
				this.pageNo = 1
				switch (this.topSign) {
					// 人员列表
					case 1:
						if (chosenum == 0) {
							this.categoryId = searchValue
							this.search_type = undefined
						} else {
							this.categoryId = undefined
							this.search_type = searchValue
						}
						this.$refs.homeList.list = []
						break;
						// 商户列表
					case 2:
						if (chosenum == 0) {
							this.categoryId = searchValue
							this.search_type = undefined
						} else {
							this.categoryId = undefined
							this.typesid = searchValue
							// this.typesid=id
						}
						this.$refs.storeList.list = []
						break;
						// 商品列表
					case 3:
						this.goodsTypeId = searchValue
						this.$refs.goodsList.list = []
						break;

				}
				this.getlist()
			},
			getlist() {
				if (this.topSign == 1) {
					this.getStaffList()
				} else if (this.topSign == 2) {
					this.materialUserList()
				} else if (this.topSign == 3) {
					this.categoryGoodsList()
				}
				uni.hideLoading()
			},
			// 员工列表
			getStaffList() {
				staffUserListAPI({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					cityId: this.city.cityId,
					longitude: this.location.longitude,
					latitude: this.location.latitude,
					categoryId: this.categoryId,
					type: this.search_type,
					name: this.name
				}).then(res => {
					console.log(res)
					this.total = res.total
					this.allDataList = this.allDataList.concat(res.data)
					this.$refs.homeList.list = this.allDataList
				})
			},
			// 商户列表
			materialUserList() {
				console.log(this.typesid)
				materialUserListAPI({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					cityId: this.city.cityId,
					longitude: this.location.longitude,
					latitude: this.location.latitude,
					types: this.typesid,
					name: this.name
				}).then(res => {
					this.allDataList = this.allDataList.concat(res.data)
					this.total = res.total
					this.$refs.storeList.list = this.allDataList
				})
			},
			// 商品列表
			categoryGoodsList() {
				categoryGoodsListAPI({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					id: this.goodsTypeId,
					name: this.name
				}).then(res => {
					this.total = res.total
					this.allDataList = this.allDataList.concat(res.data)
					this.$refs.goodsList.list = this.allDataList
				})
			},
			topChange(n) {
				this.pageNo = 1
				this.topSign = n
				this.allDataList = []
				this.categoryId = undefined,
					this.search_type = undefined
				this.$nextTick(() => {
					if (this.topSign == 1) {
						this.$refs.homeList.list = []
					} else if (this.topSign == 2) {
						this.$refs.storeList.list = []
					} else if (this.topSign == 2) {
						this.$refs.goodsList.list = []
					}
					this.getlist()
				})

			},


		}
	}
</script>

<style lang="scss" scope>
	.page {
		min-height: 100vh;
	}

	.moveRange {
		width: 100%;
		min-height: 100vh;
		overflow: hidden;

		.moveBox {
			// width: 80rpx;
			// height: 80rpx;

			image {
				width: 150rpx;
				height: 150rpx;
			}

			z-index: 10000;
		}
	}

	.announcement {
		display: flex;
		justify-content: space-between;
		align-items: center;

		background: #F2F7FE;
		border-radius: 32rpx;
		padding: 15rpx;
		margin-left: 20rpx;
		min-width: 500rpx;
		height: 100%;
		padding-left: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 0 10rpx;
		}

		text {
			flex: 1;
			font-size: 24rpx;

			color: #277EEF;
			line-height: 28rpx;
			text-align: left;
		}
	}

	.search {
		display: flex;
		// margin-top: 10rpx;
		padding: 20rpx;
		align-items: center;

		.inp {
			flex: 1;
			background: #F8F8F8;
			border-radius: 36rpx;
			padding: 10rpx;
			display: flex;
			align-items: center;
			margin-right: 10rpx;

			text {
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
				margin-left: 10rpx;
			}

			input {
				font-size: 26rpx;
				padding-left: 10rpx;
			}
		}
	}

	.tab {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;

		view {
			// width: 260rpx;
			height: 60rpx;
			line-height: 60rpx;

			margin: 0 10rpx;

			padding: 0 30rpx;
			border-radius: 30rpx;
			color: #666666;

		}

		.active {
			background-color: $uni-color-primary;
			color: #ffffff;
		}
	}

	.conent {
		background-color: #fff;
		min-height: calc(100vh - 440rpx);
	}
</style>